<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/ico.png">
    <script src="js/jquery-3.5.1.js"></script>
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* background-color: #eee; */
            background-image: url(images/login_bg2.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }

        #logo {
            width: 100px;
            height: 100px;
            background-image: url(images/logo.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            margin: 0 auto;
            opacity: 0.9;
            margin-top: 50px;
            border-radius: 20px;
            box-shadow: 2px 2px 3px rgb(60, 193, 255),
                -2px -2px 3px rgb(60, 193, 255);
        }

        #content {
            width: 400px;
            height: 360px;
            margin: 20px auto;
            margin-bottom: 0px;
            /* background-color: #fff; */
            /* box-shadow: 2px 2px 2px rgb(145, 132, 160); */
            /* box-shadow: 0px 1px 0px rgb(151, 141, 240); */
            padding-top: 10px;
        }

        .con_head {
            width: 80px;
            height: 40px;
            /* background-color: blueviolet; */
            font-family: '微软雅黑', '黑体';
            color: #fff;
            font-weight: 700;
            line-height: 40px;
            text-align: center;
            margin-left: 20px;
            margin-bottom: 10px;
            margin-top: 10px;
            box-shadow: 0px 2px 0px rgb(89, 81, 165);
            opacity: 0.7;
        }

        #content input {
            width: 300px;
            height: 30px;
            margin-left: 60px;
            margin-top: 30px;
            border-radius: 20px;
            box-shadow: 0 0 8px 2px rgb(119, 144, 255);
            opacity: 0.9;
            border: 1px solid rgb(119, 144, 255);
            text-align: center;
        }

        .login_btn {
            width: 340px;
            height: 40px;
            background-color: rgb(89, 81, 165);
            margin-left: 40px;
            margin-top: 40px;
            border-radius: 5px;
            color: #fff;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            opacity: 0.7;
        }

        .login_btn:hover,
        #sub:hover {
            background-color: rgb(64, 56, 141);
            cursor: pointer;
        }

        .regist_btn {
            width: 30px;
            height: 30px;
            display: block;
            font-size: 13px;
            color: #aaa;
            line-height: 30px;
            text-align: center;
            float: right;
            margin-right: 30px;
            opacity: 0.7;
        }

        .con_head:hover,
        .regist_btn:hover,
        .edit_regist:hover {
            cursor: pointer;
        }

        #foot {
            width: 200px;
            height: 20px;
            margin: 0 auto;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #aaa;
            opacity: 0.7;
        }

        #transform {
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.5;
            position: fixed;
            left: 0;
            top: 0;
            display: none;
            z-index: 10;
        }

        #message {
            width: 420px;
            height: 480px;
            margin: 0 auto;
            box-shadow: 0 0 5px 2px #333(204, 217, 235);
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            top: 20%;
            background-color: #fff;
            z-index: 10;
        }

        #message ul {
            list-style: none;
            margin-top: 30px;
        }

        #message li {
            width: 420px;
            height: 60px;
            text-align: center;
            line-height: 50px;
            position: relative;
            margin-top: 5px;
            color: #333;
            /* background-color: aquamarine; */
        }

        #message input {
            width: 200px;
            height: 20px;
            border: 1px solid transparent;
            border-bottom: 1px solid rgb(221, 221, 230);
            margin-left: 5px;
            padding: 2px 10px;
            border-radius: 10px;
            text-align: center
        }

        label {
            font-size: 14px;
        }

        #message li:last-child {
            margin-top: 40px;
        }

        #sub {
            width: 340px;
            height: 40px;
            background-color: rgb(89, 81, 165);
            border-radius: 5px;
            color: #fff;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            opacity: 0.9;
            margin: 0 auto;
        }

        .edit_regist {
            width: 80px;
            height: 30px;
            /* background-color: thistle; */
            color: #aaa;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            position: absolute;
            top: 10px;
            right: 0;
        }

        .edit_regist svg {
            position: relative;
            top: 3px;
            left: -2px;
        }

        #message span {
            display: inline-block;
            width: 275px;
            height: 10px;
            line-height: 10px;
            font-size: 10px;
            color: rgb(228, 47, 34);
            text-align: left;
            position: absolute;
            bottom: 8px;
            right: 0;
            display: none;
        }

        #message .regist_foot {
            display: inline-block;
            width: 420px;
            height: 20px;
            font-size: 12px;
            color: #aaa;
            text-align: center;
            line-height: 20px;
            position: absolute;
            bottom: 5px;
        }

        /* .regist1{
            display: none;
        } */
        .regist2 {
            width: 420px;
            height: 200px;
            text-align: center;
            display: none;
        }

        .regist2 svg {
            margin-top: 50px;
        }

        .regist2 p {
            width: 420px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #333;
            font-size: 24px;
            font-weight: 600;

        }
        
    </style>
    <script>
        var user = {}
        var test = false
        //登录信息
        window.onload = function () {
            //注册界面
            document.querySelector('.regist_btn').onclick = function (e) {
                document.querySelector('.regist1').style.display = 'block'
                document.querySelector('.regist2').style.display = 'none'
                document.querySelector('#transform').style.display = 'block'
                document.querySelector('#message').style.display = 'block'
                if (e.stopPropagation) {
                    e.stopPropagation()
                }
                document.querySelector('.edit_regist').onclick = function () {
                    document.querySelector('#transform').style.display = 'none'
                    document.querySelector('#message').style.display = 'none'
                }
            }
            //登录
            var userName = document.querySelector('#username')
            var userPwd = document.querySelector('#userpassword')
            userName.onkeyup = function (e) {
                var keyCode = e.keyCode  //获取按键
                if (keyCode == 13) {
                    userPwd.focus() //光标聚焦
                }
            }
            userPwd.onkeyup = function (e) {
                var keyCode = e.keyCode  //获取按键
                if (keyCode == 13) {
                    login()
                }
            }

            //注册
            var username = document.querySelector('.username')
            var userpassword = document.querySelector('.userpassword')
            var repassword = document.querySelector('.repassword')
            var userphone = document.querySelector('.userphone')
            username.onkeyup = function (e) {
                var keyCode = e.keyCode
                if (keyCode == 13||keyCode==9) {
                    checkUsername()
                    if (test) {
                        userpassword.focus()
                    }
                }
            }
            userpassword.onkeyup = function (e) {
                var keyCode = e.keyCode
                if (keyCode == 13||keyCode==9) {
                    checkUserpassword()
                    if (test) {
                        repassword.focus()
                    }
                }
            }
            repassword.onkeyup = function (e) {
                var keyCode = e.keyCode
                if (keyCode == 13||keyCode==9) {
                    checkRepassword()
                    if (test) {
                        userphone.focus()
                    }
                }
            }
            userphone.onkeyup = function (e) {
                var keyCode = e.keyCode
                if (keyCode == 13||keyCode==9) {
                    checkUserphone()
                    if (test) {
                        regist()
                    }
                }
            }
        }

        //登录
        function login() {
            // var userName = document.querySelector('#username').value
            // var userPwd = document.querySelector('#userpassword').value
            $.ajax({
                url:'http://localhost:3000/users/login',
                type:'get',
                data:{
                    username:$('#username').val(),
                    userpassword:$('#userpassword').val()
                },
                dataType:'json',
                success:function(res){

                    console.log(res)
                    var results = res.data
                    if(results ==1){
                        sessionStorage.setItem('name', $('#username').val());
                        location.href='index.html'
                    }else{
                        alert('用户登录失败')
                    }
                }
            })
            
            // if (userPwd) {
            //     // alert('欢迎登录！')
            //     localStorage.setItem('userName', userName) //保存当前登录用户到本地存储
            //     location.href = 'index.html'  //跳转首页
            // } else {
            //     alert('请输入正确的用户名和密码')
            // }
        }
        //注册
        function regist() {
            var username = document.querySelector('.username').value
            var userpassword = document.querySelector('.userpassword').value
            var repassword = document.querySelector('.repassword').value
            var userphone = document.querySelector('.userphone').value
           
            if (test) {
                document.querySelector('.regist1').style.display = 'none'
                document.querySelector('.regist2').style.display = 'block'
            }
            else{
                alert('请检查输入信息')
            }
            var username = document.querySelector('.username').value
            // console.log(username)
            var userpassword = document.querySelector('.userpassword').value
            var userphone = document.querySelector('.userphone').value
            user = {"username" : username , "userpassword" : userpassword , "userphone" : userphone}
            console.log(user)
            if(localStorage){
                localStorage.setItem('user' , JSON.stringify(user))
                // console.log(JSON.parse(localStorage.getItem('user')).username)
            }
            
        }
        function checkUsername() {
            test = false
            var username = document.querySelector('.username').value
            if (username.length < 4 || username.length > 20) {
                document.querySelectorAll('.error')[0].style.display = 'block'
            } else {
                document.querySelectorAll('.error')[0].style.display = 'none'
                test = true
            }
        }
        function checkUserpassword() {
            test = false
            var userpassword = document.querySelector('.userpassword').value
            if (userpassword.length < 6) {
                document.querySelectorAll('.error')[1].style.display = 'block'
            } else {
                document.querySelectorAll('.error')[1].style.display = 'none'
                test = true
            }
        }
        function checkRepassword() {
            test = false
            var userpassword = document.querySelector('.userpassword').value
            var repassword = document.querySelector('.repassword').value
            if (userpassword !== repassword) {
                document.querySelectorAll('.error')[2].style.display = 'block'
            } else {
                document.querySelectorAll('.error')[2].style.display = 'none'
                test = true
            }
        }
        function checkUserphone() {
            test = false
            var userphone = document.querySelector('.userphone').value
            var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/;
            if (!myreg.test(userphone)) {
                document.querySelectorAll('.error')[3].style.display = 'block'
            } else {
                document.querySelectorAll('.error')[3].style.display = 'none'
                test = true
            }
        }

    </script>
</head>

<body>
    <!-- <form action=""> -->
        <div id="logo"></div>
        <div id="content">
            <div class="con_head">密码登录</div>
            <form action="">
            <input type="text" placeholder="请输入用户名或手机号" name="username" id="username"><br>
            <input type="password" placeholder="请输入密码" id="userpassword" name="userpassword"><br>
            <div class="login_btn" onclick="login()">登录</div>
            </form>
            <span class="regist_btn">注册</span>
        </div>
        <div id="foot">
            <span>&copy知遇2020<br>
                登录注册即同意相关协议</span>
        </div>
        <div id="transform"></div>
        <div id="message">
            <form action="">
                <div class="con_head" style="color: #000;">用户注册</div>
                <div class="edit_regist">退出注册
                    <svg t="1597887300207" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3494" width="15" height="15">
                        <path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z"
                            fill="#aaaaaa" p-id="3495"></path>
                    </svg>
                </div>
                <div class="regist1">
                    <ul>
                        <li><label>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label><input type="text"
                                placeholder="用户名请输入4-20位字符" class="username">
                            <span class="error">用户名必须为4-20位</span></li>
                        <li><label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label><input type="password"
                                placeholder="密码不少于6位" class="userpassword">
                            <span class="error">密码不少于六位</span></li>
                        <li><label>确认密码：</label><input type="password" class="repassword">
                            <span class="error">两次输入的密码不相同</span></li>
                        <li><label>电话号码：</label><input type="tel" class="userphone">
                            <span class="error">请输入正确的电话号码</span></li>
                        <li class="d">
                            <div id="sub" onclick="regist()">注册
                        </li>
                    </ul>
                </div>
                <div class="regist2">
                    <svg t="1597892277201" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3901" width="150" height="150">
                        <path
                            d="M512 896C299.936 896 128 724.064 128 512S299.936 128 512 128s384 171.936 384 384-171.936 384-384 384m0-832C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64"
                            fill="#6a508c" p-id="3902"></path>
                        <path
                            d="M432 618.752l-121.376-121.376-45.248 45.248 166.624 166.624 326.624-326.624-45.248-45.248z"
                            fill="#6a508c" p-id="3903"></path>
                    </svg>
                    <p>注册成功</p>
                </div>
                <span class="regist_foot">&copy;版权归属&nbsp;知遇</span>
            </form>
        </div>
    <!-- </form> -->
</body>

</html>